<script setup lang="ts">
import { type Tree } from '@/entity/FrontendStruct';
import { ref, onMounted } from 'vue';
import orgViewComponent from '@/view-components/user/OrgViewComponents.vue'
import userViewComponents from '@/view-components/user/UserViewComponents.vue';

const userListView = ref()

onMounted(() => {

})

</script>

<template>
  <div  id="orgOperationPage">
    <orgViewComponent @item="(data: Tree)=>{userListView.changePage(data)}"></orgViewComponent>
  </div>
  <el-divider  direction="vertical" style='  height: calc(100% - 72px);margin: 0px 0px'/>
  <div id="userOperationPage">
    <userViewComponents ref="userListView"></userViewComponents>
  </div>
</template>
<style scoped>
#userOperationPage {
  float: right;
  height: calc(100% - var(--default-margin-double) - var(--default-top-bar));
  margin: 6px 6px 6px 6px;
  width: calc(100% - var(--default-margin-double) - 2px - var(--default-left-bar));
  border-radius: 5px;
}

#orgOperationPage {
  height: var(--ingres-top-bar);
  width: 250px; 
  float: left
}

</style>
